<template>
  <div class="invited">
    <NavBar :title="title" />
    <!-- 通知详情 start -->
    <div class="roll">
      <b class="state">面试详情</b>
      <div class="notice">
        <dl @click="onJobClick(responseInfo.StationID)">
          <dt>
            <img src="@/assets/img/firm_default_avatar.png" alt="" />
          </dt>
          <dd>
            <b>{{ responseInfo.CompanyName }}</b>
            <span>{{ responseInfo.StationName }}</span>
            <!-- <span>8k-13k</span> -->
          </dd>
        </dl>
        <ul>
          <li>
            <label>时间</label>
            <span>{{ responseInfo.DateStr }}</span>
          </li>
          <li>
            <label>地点</label>
            <span>{{ responseInfo.Address }}</span>
          </li>
          <li>
            <label>备注</label>
            <span>{{ responseInfo.Remark }}</span>
          </li>
        </ul>
        <!-- <p>
                    <van-button round type="primary" text="拒绝面试"></van-button>
                    <van-button round type="primary" text="接受面试"></van-button>
                </p> -->
      </div>
    </div>
    <!-- 通知详情 end -->

    <!-- 底部操作 start -->
    <ul class="operate">
      <li @click="toCall(responseInfo.Tel)">
        <van-icon name="phone" color="#fff" size="20" />
        <span>电话沟通</span>
      </li>
      <li @click="onIM(responseInfo.CompanyID)">
        <van-icon name="chat" color="#fff" size="20" />
        <span>在线聊天</span>
      </li>
      <!-- <li>
                <van-icon name="location" color="#fff" size="20" />
                <span>地图导航</span>
            </li>
            <li>
                <van-icon name="clock" color="#fff" size="20" />
                <span>修改时间</span>
            </li> -->
    </ul>
    <!-- 底部操作 end -->
  </div>
</template>

<script>
import NavBar from "@/components/NavBar.vue";
import { Icon, Button } from "vant";
import {mixin_person_toJobCompany,mixin_call,mixin_person_toIM,} from "@/mixin/mixins";
export default {
  name: "InterViewInfo",
  components: {
    NavBar,
    [Icon.name]: Icon,
    [Button.name]: Button,
  },
  props: ["title", "data"],
  mixins: [mixin_person_toJobCompany, mixin_call, mixin_person_toIM],
  mounted() {
    this.getInfo();
  },
  // 定义属性
  data() {
    return {
			id:this.$route.params.id,
			responseInfo:{}
		};
  },
  // 方法集合
  methods: {
		getInfo(){
			this.$api.get('/PAC/GetFaceNoticeInfoPerson',{id:this.id}).then(res=>{
				if(res.success){
					this.responseInfo = res.response;
				}
			})
		}
	},
};
</script>

<style>
.invited {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #367ef4;
}

.invited.agree {
  background-color: #5bc77b !important;
}

.invited.reject {
  background-color: #ec5e5d !important;
}

.invited .operate {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  height: 90px;
}

.invited .operate li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1;
}

.invited .operate li span {
  margin-top: 10px;
  font-size: 12px;
  color: #fff;
  line-height: 12px;
}

.invited .roll {
  position: fixed;
  top: 46px;
  bottom: 90px;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  padding: 0 20px;
  overflow-x: hidden;
  overflow-y: auto;
}

.invited .roll .state {
  padding: 16px 0;
  font-size: 20px;
  color: #fff;
}

.invited .roll .notice {
  display: flex;
  flex-direction: column;
  padding: 0 20px 20px;
  border-radius: 10px;
  margin-bottom: 15px;
  background-color: #fff;
}

.invited .roll .notice p {
  display: flex;
  padding: 10px 0;
}

.invited .roll .notice p button {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  border: 0;
  background-color: #f0f0f0;
  font-size: 16px;
  color: #666;
}

.invited .roll .notice p button + button {
  margin-left: 20px;
  background-color: #367ef4;
  color: #fff;
}

.invited .roll .notice ul {
  display: flex;
  flex-direction: column;
  padding: 20px 0;
}

.invited .roll .notice ul li {
  display: flex;
  padding: 4px 0;
  font-size: 15px;
}

.invited .roll .notice ul li label {
  display: flex;
  flex: 0 0 46px;
  color: #a8a8a8;
}

.invited .roll .notice ul li span {
  display: flex;
  flex: 1;
  color: #333;
}

.invited .roll .notice dl {
  position: relative;
  display: flex;
  align-items: center;
  padding: 24px 0;
  border-bottom: 0.5px solid #e8e8e8;
  margin: 0;
}

.invited .roll .notice dl::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 9px;
  height: 9px;
  border-right: 1px solid #ccc;
  border-top: 1px solid #ccc;
  margin-right: 6px;
  transform: rotate(45deg) translateY(-50%);
}

.invited .roll .notice dl dt {
  display: flex;
  flex: 0 0 66px;
  height: 66px;
  border: 0.5px solid #ddd;
}

.invited .roll .notice dl dt img {
  width: 100%;
  height: 100%;
}

.invited .roll .notice dl dd {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  height: 66px;
  margin: 0 15px;
  overflow: hidden;
}

.invited .roll .notice dl dd b {
  font-size: 16px;
  color: #000;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.invited .roll .notice dl dd span {
  font-size: 14px;
  color: #666;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.invited .roll .notice dl dd span + span {
  color: #f66;
}
</style>
